<template>
  <div class="thesis">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的指导" name="first">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-button type="primary" icon="el-icon-edit" plain @click="dialogVisible = true">添加</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <guidancemain></guidancemain>
          </el-col>
        </el-row>
      </el-tab-pane>


      <el-tab-pane label="待批论文" name="second">

        <mythesis name="0"></mythesis>
      </el-tab-pane>
      <el-tab-pane label="已批论文" name="third">
        <mythesis name="1"></mythesis>

      </el-tab-pane>

      <el-tab-pane label="待批改" name="fourth">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-button type="primary" icon="el-icon-edit" plain @click="dialogVisible = true">添加</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <guidancemain></guidancemain>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="退回" name="fifth">
        <mythesis name="3"></mythesis>
      </el-tab-pane>

    </el-tabs>


    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <label for="teacher">指导方向</label>
      <div>
        <el-input
          class="mt-5 mb-5"
          placeholder="输入论文的指导方向"
          v-model="input"
          id="teacher"
          clearable>
        </el-input>

      </div>

      <el-row :gutter="20">
        <el-col :span="12"><label for="teacher">开始时间</label>
          <div>
            <el-date-picker
              type="date"
              v-model="starttime"
              class="mt-5 mb-5"
              style="width: 100%"
              placeholder="选择一个开始时间">
            </el-date-picker>

          </div>
        </el-col>
        <el-col :span="12"><label for="teacher">结束时间</label>
          <div>
            <el-date-picker
              type="date"
              style="width: 100%"
              v-model="stoptime"
              class="mt-5 mb-5"
              placeholder="选择一个结束时间">
            </el-date-picker>

          </div>
        </el-col>

      </el-row>


      <label for="teacher">描述</label>
      <div>
        <el-input
          class="mt-5 "
          placeholder="描述"
          v-model="input"
          id="描述"
          clearable>
        </el-input>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

  import mythesis from '@/components/MythesisState'
  import guidancemain from '@/components/guidancemain'

  export default {
    name: "thesis",
    components: {mythesis, guidancemain},
    data() {
      return {
        stoptime: '',
        starttime: '',
        state: '',
        teacherid: '',
        dialogVisible: false,
        input: '',

        activeName: 'first',
      }
    },
    methods: {
      handleClick(tab, event) {
        sessionStorage.setItem("activeName", tab.name.substring(0, tab.name.length));

      },
      handleClose(done) {
        var self = this;
        this.$confirm('确认提交？')
          .then(_ => {
            //发起网络请求   提交数据
            //查看是否有相同选题


            self.dialogVisible = false;

          })
          .catch(_ => {
          });

      },


    },
    mounted() {

    },
    created() {
      var activ = sessionStorage.getItem("activeName");
      this.activeName = activ != null ? activ : "first"
    }
  }
</script>

<style scoped>


  .addr {
    color: #d6d6d7;
    font-size: 12px;
  }


</style>
